<template>
	<view>
		<nav-custom></nav-custom>
		<scroll-view 
			class="scroll-cont" 
			scroll-y="true" 
			@scroll="handleScroll"
			:scroll-into-view="topItem"
			scroll-with-animation
		>
			<view>
				<view id="maodian"></view>
				<swiper :indicator-dots="true">
					<swiper-item>
						<view class="swiper-item">
							<image src="https://file003.harlem.wang/3GqfllCGX80Svw9JusvWUQA2ApowVEqJ/banner1.jpg" mode="widthFix"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="https://file003.harlem.wang/0jj6OewvgRhuEt0EG9yebSrCFH6QJTVm/banner2.jpg" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
				<!-- #ifdef MP-WEIXIN -->
				<uni-grid :column="4">
					<uni-grid-item class="text-center">最新活动</uni-grid-item>
					<uni-grid-item class="text-center">个人中心</uni-grid-item>
					<uni-grid-item class="text-center">关于我们</uni-grid-item>
					<uni-grid-item class="text-center">配送范围</uni-grid-item>
				</uni-grid>
				<!-- #endif -->
				<home-title title="本季推荐" entitle="Seasonal Recommend" :more="false"></home-title>
				<scroll-view scroll-x="true" >
					<view class="flex recommend">
						<navigator url="/pages/test/test">
							<image src="https://file003.harlem.wang/ruBRFJN7f6rHYqPztKRyAvLdbgGBdkFr/d943a30b6ebdaa1a.jpg" mode="heightFix"></image>
						</navigator>
						<navigator url="">
							<image src="https://file003.harlem.wang/QwWe4pkrvICxWraeS0wEmA1QneMJu2Tq/8ff31961349bc1b6%20%281%29.jpg" mode="heightFix"></image>
						</navigator>
						<navigator url="">
							<image src="https://file003.harlem.wang/sgeyYHVn3AjLkdjCEC7pHEYEbobpPnc0/681400bc21dee76a.jpg" mode="heightFix"></image>
						</navigator>
					</view>
				</scroll-view>
				<home-title></home-title>
				<view class="flex flex-wrap justify-between padding-sm">
					<cake-item v-for="item in cakelist" :gdata="item"></cake-item>
				</view>
			</view>
		</scroll-view>
		<view class="back-top" v-if="backShow" @click="handleBack">
			<text class="iconfont icon-tubiao_fanhuidingbu"></text>
		</view>
	</view>
</template>

<script>
	import {cakeGet} from '../../api/cake.js'
	export default {
		data() {
			return {
				cakelist:[],
				backShow:false, //控制返回顶部按钮显示
				topItem:''  //动态管理锚点值
			};
		},
		computed:{
			cityname(){
				return this.$store.state.city.cityname
			}
		},
		onLoad() {
			cakeGet().then(res=>{
				this.cakelist = res.data.results
			})
		},
		methods: {
			handleScroll(ev) {
				// console.log(ev);
				let {scrollTop} = ev.detail
				this.backShow = scrollTop>400
				if(scrollTop<400){
					this.topItem = ''
				}
			},
			handleBack(){
				this.topItem = 'maodian'
			}
		},
	}
</script>

<style lang="scss">
page{
	background-color: #fff;
}
swiper,swiper-item{
	height: 700upx;
}
swiper{
	image{
		width: 100%;
	}
}
.recommend{
	image{
		height: 300upx;
	}
}
.back-top{
	height: 80upx;
	width: 80upx;
	background-color: #fff;
	text-align: center;
	line-height: 80upx;
	position: fixed;
	bottom: 120upx;
	right: 20upx;
	box-shadow: 0 0 20upx 0 rgba(0,0,0,0.3);
	border-radius: 50%;
}
.scroll-cont{
	height: 90vh;
}
</style>
